<template>
  <div id="tipsCard" class="main">
    <div class="df card-title f14" style="align-items: normal">
      <div style="margin: 0 5px; color: red" v-show="tipsData.isShowIcon">
        <el-icon size="16"><WarningFilled /></el-icon>
      </div>
      <div>重要提示：</div>
    </div>
    <div class="tips-contaier f12">
      <div
        v-for="(item, index) in tipsData.tipsList"
        :key="item"
        v-show="!type"
      >
        {{ index + 1 }}、{{ item }}
      </div>
      <div
        v-html="tipsData.portDescription"
        style="white-space: pre-wrap"
        v-show="type"
      ></div>
    </div>
  </div>
</template>

<script setup>
const { tipsData, type } = defineProps({
  tipsData: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
#tipsCard {
  margin: 20px 0;
  padding: 0 10px;
  border: 1px dashed red;
  background: #fff9f9;
  border-radius: 3px;
  .card-title {
    margin-top: 8px;
  }
  .tips-contaier {
    margin-bottom: 10px;
  }
}
</style>
